<template>
  <div style="height: 100%">
    <el-row>
      <el-col :span="12" style="height: 500px">
        <v-chart :option="pieOption"/>
      </el-col>
      <el-col :span="12" style="height: 500px">
        <v-chart :option="barOption"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'EchartsView',
  data () {
    return {
      pieOption: {
        title: {
          text: '文章分类占比图',
          subtext: '实时数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c}({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '文章分类',
            type: 'pie',
            radius: '50%',
            data: [{
              name: 'HTML',
              value: 15
            }, {
              name: '穿越',
              value: 48
            }, {
              name: 'JAVA',
              value: 22
            }]
          }
        ]
      },
      barOption: {
        title: {
          text: '博客年度数据总结',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['2008', '2009', '2010']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'bar',
          data: [33, 55, 28]
        }]
      }
    }
  },
  created () {
    this.$http.get('admin/echarts').then(data => {
      let barCount = 0
      const barData = data.data.articleData
      const xArr = []
      const yArr = []

      for (let i = 0; i < barData.length; i++) {
        if (i < 5) {
          xArr.push(barData[i].year + '年')
          yArr.push(barData[i].count)
        } else {
          barCount += barData[i].count
        }
      }
      if (barData.length > 5) {
        xArr.push('其他年份')
        yArr.push(barCount)
      }
      this.barOption.xAxis.data = [...xArr]
      this.barOption.series[0].data = [...yArr]

      let pieCount = 0
      const pieData = data.data.categoryData
      const pieArr = []
      for (let i = 0; i < pieData.length; i++) {
        if (i < 5) {
          pieArr.push({
            name: pieData[i].categoryName,
            value: pieData[i].articleCount
          })
        } else {
          pieCount += pieData[i].articleCount
        }
      }
      if (pieData.length > 5) {
        pieArr.push({
          name: '其他分类',
          value: pieCount
        })
      }
      console.log(pieCount)
      console.log(pieData)
      console.log(pieArr)
      this.pieOption.series[0].data = [...pieArr]
    })
  }
}
</script>

<style scoped>

</style>
